<template>
  <el-dialog v-model="visible" :title="`配置护理级别：${levelName}`" width="1000px" top="5vh" destroy-on-close
    class="nursing-level-config-dialog">
    <div class="dialog-body">

      <!-- 已包含项目 -->
      <h3 class="section-title">已包含护理项目</h3>
      <el-form :inline="true" :model="includedSearchForm" class="form-row">
        <el-form-item label="名称:">
          <el-input v-model="includedSearchForm.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadIncluded">查询</el-button>
          <el-button @click="resetIncluded">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="includedTable" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" border>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="frequency" label="执行次数" />
        <el-table-column prop="cycle" label="执行周期" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" size="small" @click="removeProject(scope.row.projectId)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination :current-page="includedPagination.cur" :page-size="includedPagination.size"
          :total="includedPagination.total" :page-sizes="[5, 10, 20]" layout="total, sizes, prev, pager, next"
          @size-change="size => { includedPagination.size = size; loadIncluded() }"
          @current-change="page => { includedPagination.cur = page; loadIncluded() }" />

      </div>

      <!-- 未包含项目 -->
      <h3 class="section-title">未包含护理项目</h3>
      <el-form :inline="true" :model="excludedSearchForm" class="form-row">
        <el-form-item label="名称:">
          <el-input v-model="excludedSearchForm.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadExcluded">查询</el-button>
          <el-button @click="resetExcluded">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="excludedTable" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" border>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="frequency" label="执行次数" />
        <el-table-column prop="cycle" label="执行周期" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" size="small" @click="addProject(scope.row.projectId)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination :current-page="excludedPagination.cur" :page-size="excludedPagination.size"
          :total="excludedPagination.total" :page-sizes="[5, 10, 20]" layout="total, sizes, prev, pager, next"
          @size-change="size => { excludedPagination.size = size; loadExcluded() }"
          @current-change="page => { excludedPagination.cur = page; loadExcluded() }" />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import {inject} from 'vue'
const axios = inject("axios")

import { ElMessage } from 'element-plus'

const visible = ref(false)
const levelId = ref(null)
const levelName = ref('')

const open = (id, name) => {
  levelId.value = id
  levelName.value = name
  visible.value = true
  loadIncluded()
  loadExcluded()
}
defineExpose({ open })

const includedTable = ref([])
const includedPagination = ref({ cur: 1, size: 5, total: 0 })
const includedSearchForm = ref({ name: '', status: '' })

const loadIncluded = async () => {
  const { cur, size } = includedPagination.value
  const { name, status } = includedSearchForm.value
  const res = await axios.get('/levelProjectLink/getIncludedProjects', {
    params: { cur, number: size, levelId: levelId.value, name, status }
  })
  if (res.data.status === 200) {
    includedTable.value = res.data.data || []
    includedPagination.value.total = res.data.total
  }
}
const resetIncluded = () => {
  includedSearchForm.value.name = ''
  includedPagination.value.cur = 1
  loadIncluded()
}
const removeProject = async (projectId) => {
  const res = await axios.post('/levelProjectLink/removeProjectFromLevel', null, {
    params: { levelId: levelId.value, projectId }
  })
  if (res.data.status === 200) {
    ElMessage.success('移除成功')
    loadIncluded()
    loadExcluded()
  } else {
    ElMessage.error(res.data.msg || '移除失败')
  }
}

const excludedTable = ref([])
const excludedPagination = ref({ cur: 1, size: 5, total: 0 })
const excludedSearchForm = ref({ name: '', status: '' })

const loadExcluded = async () => {
  const { cur, size } = excludedPagination.value
  const { name, status } = excludedSearchForm.value
  const res = await axios.get('/levelProjectLink/getExcludedProjects', {
    params: { cur, number: size, levelId: levelId.value, name, status }
  })
  if (res.data.status === 200) {
    excludedTable.value = res.data.data || []
    excludedPagination.value.total = res.data.total
  }
}
const resetExcluded = () => {
  excludedSearchForm.value.name = ''
  excludedPagination.value.cur = 1
  loadExcluded()
}
const addProject = async (projectId) => {
  const res = await axios.post('/levelProjectLink/addProjectToLevel', null, {
    params: { levelId: levelId.value, projectId }
  })
  if (res.data.status === 200) {
    ElMessage.success('添加成功')
    loadIncluded()
    loadExcluded()
  } else {
    ElMessage.error(res.data.msg || '添加失败')
  }
}

// 表头样式统一
const tableHeaderStyle = () => ({
  background: '#f9fafc',
  color: '#333',
  textAlign: 'center'
})
const tableCellStyle = () => ({
  textAlign: 'center'
})
</script>

<style scoped>
.nursing-level-config-dialog ::v-deep(.el-dialog__title) {
  font-size: 27.2px;
  font-weight: bold;
  margin-top: 0;
}

.dialog-body {
  padding: 20px;
  border-radius: 4px;
}

.section-title {
  font-weight: bold;
  margin: 0 0 12px 0;
}

.form-row {
  margin-bottom: 16px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>
